<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html" id="parent">
    <p:commandButton value="Create new item" oncomplete="PF('createNewDiag').show();"/>
    <p:commandButton value="Edit item" oncomplete="PF('editNewDiag').show();"/>
    <p:commandButton value="Edit Row" oncomplete="PF('editChildDiag').show();"/>
    <p:commandButton value="Add row to item" oncomplete="PF('viewer').show();" update="MobItemTitle"/>
    <p:commandButton value="Print" type="button" icon="ui-icon-print" rendered="#{login.current.department.name eq 'Admin'}">
        <p:printer target="mobTable" />
    </p:commandButton>
    <p:dataTable  id="mobTable" var="res" value="#{mobilizationController.mobilizationResources}" 
                  paginator="true" rows="100" 
                  paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" 
                  rowsPerPageTemplate="3,25,50,100,250,500"
                  emptyMessage="No Items Entered"
                  > 
        <f:facet name="header">  
            Mobilization Data

        </f:facet> 
        <p:columnGroup type="header">  
            <p:row>  
                <p:column rowspan="2" headerText="Item" />  
                <p:column colspan="5" headerText="Item Data" />  
            </p:row>  

            <p:row>  


                <p:column headerText="Title" />  
                <p:column headerText="Quantity" />  
                <p:column headerText="Category" />  
                <p:column headerText="Loss" /> 
                <p:column headerText="Total" /> 

            </p:row>  
        </p:columnGroup> 
        <p:subTable var="stats" value="#{res.mobilizationItemsList}" id="subTable1" >  
            <f:facet name="header"> 
                #{res.title}(#{res.code})
            </f:facet>  
            <p:column>  

            </p:column> 
            <p:column>  
                #{stats.title}  
            </p:column>  
            <p:column>  
                #{stats.quantity}  
            </p:column>  

            <p:column>  
                #{stats.category}
            </p:column>  

            <p:column>  
                #{stats.loss}  
            </p:column>  
            <p:column>  
                #{stats.total}  
            </p:column>


        </p:subTable>

    </p:dataTable>

    <p:dialog widgetVar="createNewDiag" header="Create New" dynamic="true" >
        <p:growl  id='mobItemData' life="1500" showDetail="true"/>
        <p:panelGrid columns="2" id="newMobItem">

            <f:facet name="header">Item Data</f:facet>
            <p:outputLabel for="mobTitle" value="Title"/>
            <p:inputText id="mobTitle" value="#{mobilizationController.title}" required="true" requiredMessage="Title can't be empty"/>
            <p:outputLabel for="mobCode" value="Code"/>
            <p:inputText id="mobCode" value="#{mobilizationController.code}" required="true" requiredMessage="Code can't be empty"/>

            <f:facet name="footer">
                <p:commandButton process="newMobItem" value="Create" update="mobTable,mobItemData,MobItemTitle,editMobItem" action="#{mobilizationController.save}" oncomplete="handleCreateRequest(xhr, status, args)"/>
            </f:facet>
        </p:panelGrid>
        <script type="text/javascript">
            function handleCreateRequest(xhr, status, args) {
                if (args.validationFailed) {
                    PF('createNewDiag').jq.effect("shake", {times: 5}, 100);
                }
                else {
                    PF('createNewDiag').hide();

                }
            }
        </script>
    </p:dialog>
    <p:dialog widgetVar="editNewDiag" header="Edit" dynamic="true" >
        <p:growl  id='editMobItemData' life="3000" showDetail="true"/>
        <p:outputPanel  styleClass="editItemPanel">
            <p:panel id="editMobItem"  style="overflow: auto">
                <p:fragment autoUpdate="true">
                    <p:panelGrid columns="2"  >
                        <p:outputLabel for="mobEditItems" value="Edit Item"/>
                        <p:fragment autoUpdate="true">
                            <h:panelGrid columns="2">
                                <p:selectOneMenu id="mobEditItems" value="#{mobilizationController.selectedResource}" required="true" converter="mobilizationConverter">
                                    <f:selectItems  var="resItem" value="#{mobilizationController.mobilizationResources}"  itemLabel="#{resItem.title}" itemValue="#{resItem}"/>
                                </p:selectOneMenu>
                                <p:commandButton  process="@(#mobEditItems)" value="Load Data" update="@(.editItemPanel)" />
                            </h:panelGrid>
                        </p:fragment>
                        <f:facet name="header">Item Data</f:facet>
                        <p:outputLabel for="mobEditTitle" value="Title"/>
                        <p:inputText id="mobEditTitle" value="#{mobilizationController.selectedResource.title}" required="true" requiredMessage="Title can't be empty"/>
                        <p:outputLabel for="mobEditCode" value="Code"/>
                        <p:inputText id="mobEditCode" value="#{mobilizationController.selectedResource.code}" required="true" requiredMessage="Code can't be empty"/>
                        <f:facet name="footer">
                            <p:commandButton process="editItem" value="Edit" update="mobTable,editMobItemData,MobItemTitle,itemChildMobTitle" action="#{mobilizationController.updateItem()}" oncomplete="handleEditDataRequest(xhr, status, args)"/>
                        </f:facet>
                    </p:panelGrid>
                </p:fragment>

            </p:panel>
        </p:outputPanel>
        <script type="text/javascript">
            function handleEditDataRequest(xhr, status, args) {
                if (args.validationFailed) {
                    PF('editNewDiag').jq.effect("shake", {times: 5}, 100);
                }
                else {
                    PF('editNewDiag').hide();

                }
            }
        </script>
    </p:dialog>
    <p:dialog widgetVar="viewer" header="Edit" dynamic="true"  style="width: auto;" >
        <p:outputPanel  styleClass="editMobPanel">
            <p:growl  id='editMobData' life="1500" showDetail="true"/>

            <p:panel id="MobItemTitle"  style="overflow: auto">
                <p:fragment autoUpdate="true">
                    <p:panelGrid columns="2"  >
                        <p:outputLabel for="mobItems" value="Add to"/>
                        <p:selectOneMenu id="mobItems" value="#{mobilizationController.selectedResource}" required="true" converter="mobilizationConverter">
                            <f:selectItems  var="resItem" value="#{mobilizationController.mobilizationResources}"  itemLabel="#{resItem.title}" itemValue="#{resItem}"/>
                        </p:selectOneMenu>

                        <p:outputLabel for="childMobTitle" value="Title"/>
                        <p:inputText id="childMobTitle" value="#{mobilizationController.newItem.title}" required="true" requiredMessage="Title can't be empty"/>
                        <p:outputLabel for="loss" value="Loss Rate"/>
                        <p:inputText id="loss" value="#{mobilizationController.newItem.loss}" required="true" requiredMessage="Loss Rate can't be empty"/>
                        <p:outputLabel for="category" value="Price"/>
                        <p:inputText id="category" value="#{mobilizationController.newItem.category}" required="true" requiredMessage="Price can't be empty"/>
                        <p:outputLabel for="quantityMob" value="Quantity"/>
                        <p:inputText id="quantityMob" value="#{mobilizationController.newItem.quantity}" required="true" requiredMessage="Quantity can't be empty"/>
                        <f:facet name="footer">
                            <p:commandButton process="@(.editMobPanel)" value="Create" update="mobTable,@(.editMobPanel),editMobData,itemChildMobTitle" action="#{mobilizationController.saveData}" oncomplete="handleEditRequest(xhr, status, args);"/>
                        </f:facet>

                    </p:panelGrid>
                </p:fragment>

            </p:panel>


        </p:outputPanel>
        <script type="text/javascript">
            function handleEditRequest(xhr, status, args) {
                if (args.validationFailed) {
                    PF('viewer').jq.effect("shake", {times: 5}, 100);
                }
                else {
                    PF('viewer').hide();

                }
            }
        </script>
    </p:dialog>
<p:dialog widgetVar="editChildDiag" header="Edit" dynamic="true"  style="width: auto;" >
        <p:outputPanel  styleClass="editChildPanel">
            <p:growl  id='editMobChildData' life="1500" showDetail="true"/>

            <p:panel id="itemChildMobTitle"  style="overflow: auto">
                <p:fragment autoUpdate="true">
                    <p:panelGrid columns="2"  >
                        <p:outputLabel for="mobchilditems" value="Row to Edit"/>
                        <p:fragment autoUpdate="true">
                            <h:panelGrid columns="2">

                                <p:selectOneMenu id="mobchilditems" value="#{mobilizationController.editableItem}" required="true" converter="mobDataConverter">
                                    <f:selectItems  var="resItem" value="#{mobilizationController.getChildResources()}"  itemLabel="#{resItem.title}" itemValue="#{resItem}"/>
                                </p:selectOneMenu>

                                <p:commandButton  process="@(#mobchilditems)" value="Load Data" update="@(.editChildPanel)" />
                            </h:panelGrid>
                        </p:fragment>

                         <p:outputLabel for="childEditMobTitle" value="Title"/>
                        <p:inputText id="childEditMobTitle" value="#{mobilizationController.editableItem.title}" required="true" requiredMessage="Title can't be empty"/>
                        <p:outputLabel for="lossEdit" value="Loss Rate"/>
                        <p:inputText id="lossEdit" value="#{mobilizationController.editableItem.loss}" required="true" requiredMessage="Loss Rate can't be empty"/>
                        <p:outputLabel for="categoryEdit" value="Price"/>
                        <p:inputText id="categoryEdit" value="#{mobilizationController.editableItem.category}" required="true" requiredMessage="Price can't be empty"/>
                        <p:outputLabel for="quantityMobEdit" value="Quantity"/>
                        <p:inputText id="quantityMobEdit" value="#{mobilizationController.editableItem.quantity}" required="true" requiredMessage="Quantity can't be empty"/>
                        <f:facet name="footer">
                            <p:commandButton process="@(.editChildPanel)" value="Create" update="mobTable,@(.editChildPanel),editMobChildData" action="#{mobilizationController.updateChildItem()}" oncomplete="handleEditRequest(xhr, status, args);"/>
                        </f:facet>

                    </p:panelGrid>
                </p:fragment>

            </p:panel>


        </p:outputPanel>
        <script type="text/javascript">             function handleEditRequest(xhr, status, args) {
                if (args.validationFailed) {
                    PF('editChildDiag').jq.effect("shake", {times: 5}, 100);
                }
                else {
                    PF('editChildDiag').hide();

                }
            }
        </script>
    </p:dialog>
</ui:composition>

